// Name:            Bottombar
// Description:     Define style for bottombar
//
// Component:       `.am-bottombar`
//
// ========================================================================

/* ========================================================================
   Component: Bottombar
 ========================================================================== */

.am-bottombar{
  position: fixed;
  bottom:0px;
  background: @bottombar-default-bg;
  min-height: @bottombar-height;
  overflow: hidden;
  width: 100%;
  z-index: 4;
  box-shadow: 0px 0px 3px #aaa;
  text-align: center;
  line-height:36px;
  margin:0px;
  padding:0px;

  .clearfix();

  color: @bottombar-default-color;

  a {
    color: @bottombar-default-color;
  }

}

.am-bottombar-nav{
  list-style: none;
  margin-bottom: 0px;
  padding:0px;
  .clearfix();
  color: #575757;
  margin-bottom: 5px;
  margin-top:-2px;

  > li {
    position: relative;
    display:block;
    float:left;
    width: 23.5%;
    > span {
      display: block;
      margin:0px;
      padding:0px;
      height:20px;
      font-size: 1.3rem;
      margin-bottom: 3px;
    }

    + li {
      margin-left: 5px;
      width: 23.5%;
      > span {
        display: block;
        margin:0px;
        padding:0px;
        height:20px;
        font-size: 1.3rem;
        margin-bottom: 3px;
      }
    }

    &.am-active{
      &,
      &:hover,
      &:focus {
        color: @bottombar-nav-active-color;
        background-color: @bottombar-nav-active-bg;
        cursor: default;
      }
    }
  }
}